<template>
  <div :class="wrapperClasses" :style="styles">
    <div :class="imgWrapperClass" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"
         :style="{height:height+'px'}">
      <img :src="targetImage" alt="" :class="imgTargetClass" />
      <img :src="templateImage" alt="" :class="imgTmpClass"
           :style="{top:templateImageTop+'px',left:currentX+'px',width: imgTmpWidth+'px'}" />

      <Icon type="refresh" :class="iconRefreshClass" @click="requestVerifyImg" v-if="!verifySuccess" />

      <Spin size="large" fix v-if="spinShow">
        <Icon type="load-c" size="24" :class="iconLoadingClass" />
        <p>加载中...</p>
      </Spin>

      <p :class="resultErrorClass" v-if="loadVerifyImgFail">{{msg}}</p>

      <div :class="resultTipClass">{{resultTipText}}</div>
    </div>
    <div :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" ref="slider">
      <p :class="sliderTextClass">{{sliderText}}</p>

      <div :class="failBtnClasses" @touchstart="onPointerDown($event)"
           @mousedown="onPointerDown($event)" :style="{left:currentX+'px'}">
        <Icon type="android-more-horizontal" v-if="dragging" />
        <Icon type="checkmark" v-if="verifySuccess && !dragging" />
        <Icon type="close" v-if="!verifySuccess && !dragging" />
      </div>

      <div :class="sliderPassClass" :style="{width:currentX+10+'px'}"></div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
